@import '~antd/es/style/variable.less';

.rightAttributeContainer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 280px;
  background-color: @component-background;
  .rightAttributeContent {
    display: flex;
    flex-direction: column;
    height: 100%;
    .rightAttributeBreadcrumb {
      position: relative;
      border-bottom: 1px solid @border-color-base;
      .rightAttributeBreadcrumbIcon {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 36px;
        vertical-align: bottom;
        > span {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 14px;
          transform: translate(-50%, -50%);
        }
      }
      .rightAttributeBreadcrumbList {
        position: absolute;
        top: 0;
        right: 0;
        left: 28px;
        height: 100%;
        padding-top: 4px;
        padding-right: 8px;
        color: @text-color-secondary;
        line-height: 28px;
        .rightAttributeBreadcrumbListContent {
          display: inline-block;
          max-width: 100%;
          overflow: hidden;
          direction: rtl;
          white-space: nowrap;
          text-overflow: ellipsis;
          .rightAttributeBreadcrumbItemSplit {
            margin: 4px;
          }
          > span:not(.rightAttributeBreadcrumbItemSplit) {
            cursor: pointer;
          }
          > span:last-child {
            color: @text-color;
            cursor: default;
          }
        }
      }
    }
    .rightAttributeSettings {
      position: relative;
      flex: 1 1 auto;
    }
  }
  .rightAttributeContainerEmpty {
    color: @text-color-secondary;
    line-height: 200px;
    text-align: center;
  }
}
